/**
 * props高级玩法
 * 1. children:如果组件下有子节点（任意值），props对象中就会有children
 * 2. props传值校验和默认值
 */
import React, { Component } from 'react'
// 导入类型校验库
import PropTypes from 'prop-types'


// 类子组件
class Child extends Component {

  render () {
    console.log(this.props.children)
    return (
      <>
        <h2>类子组件</h2>
        <button onClick={() => {
          this.props.children(100000)
        }}>调用插槽方法</button>
      </>
    )
  }
}

// 函数组件
const Fnc = (props) => {
  console.log(props)
  return (
    <div>
      <h2>函数组件</h2>
    </div>
  )
}


// 封装组件
/**
 * 渲染颜色列表
 * @param {*} props 接收颜色值数组并渲染
 */
const Colors = (props) => {
  const { colors, a } = props
  return (
    <>
      <ul>
        {
          colors.map((item) => <li style={{ background: item, color: '#fff' }} key={item}>{item}</li>)
        }
      </ul>
      <p>{a}</p>
    </>
  )
}
// 类型校验
Colors.propTypes = {
  colors: PropTypes.array.isRequired,
  a: PropTypes.number.isRequired,
  // obj: PropTypes.object
  obj: PropTypes.shape({
    a: PropTypes.string,
    b: PropTypes.bool
  })
}

Colors.defaultProps = {
  a: 0
}

// 类组件
class Colored extends Component {

  // 2. 校验
  static propTypes = {
    a: PropTypes.func.isRequired,
    b: PropTypes.array.isRequired,
    c: PropTypes.number
  }

  // 设置默认值
  static defaultProps = {
    b: [],
    c: 1000
  }


  render () {
    return (
      <div>
        <p>封装的类组件</p>
        <h1>{this.props.c}</h1>
      </div>
    )
  }
}
// 1. 类组件校验
// Colored.propTypes = {
//   a: PropTypes.func.isRequired,
//   b: PropTypes.array
// }




// 父组件
class Index extends Component {
  state = {
    // 颜色值
    colors: ['red', 'blue', 'orange'],
    // colors: 123,
    obj: {
      a: '1',
      b: true
    }
  }
  render () {
    return (
      <div>
        <h1>props高级玩法</h1>
        {<p>{'我是虚拟DOM=》本质=》普通JS对象'}</p>}
        <hr />
        <Colors colors={this.state.colors} obj={this.state.obj} />
        <Colored c={23456} a={() => console.log(1)} />
        <hr />
        <Child>
          {
            (d) => {
              console.log(d)
            }
          }
        </Child>
        <hr />
        <Fnc>123</Fnc>
      </div>
    )
  }
}

export default Index

